<template>
  <div>
    <el-row
      type="flex"
      justify="space-between"
      align="middle"
      style="height: 40px"
      @click.native="isdone = !isdone"
    >
      <el-col>
        <b v-if="isRoot">  <i class="el-icon-office-building" />  {{ treeNode.name }}</b>
        <span v-else @click.native="isdone = !isdone">
          <i :class="{'el-icon-user-solid': treeNode.children.length == 0,'el-icon-remove-outline':treeNode.children.length > 0 &&isdone,'el-icon-circle-plus':treeNode.children.length > 0 && !isdone }" />
          {{ treeNode.name }}</span>
      </el-col>
      <el-col :span="4">
        <el-row type="flex" justify="end">
          <!-- 两个内容 -->
          <el-col>{{ treeNode.manager }}</el-col>
          <el-col>
            <!-- 下拉菜单 element -->
            <el-dropdown>
              <span> 操作<i class="el-icon-arrow-down" /> </span>
              <!-- 下拉菜单 -->
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="Addpartment(treeNode.id,treeNode.name)">添加子部门</el-dropdown-item>
                <el-dropdown-item v-if="!isRoot" @click.native="Editpartment(treeNode.id)">编辑部门</el-dropdown-item>
                <el-dropdown-item v-if="!isRoot" @click.native="Delpartment(treeNode.id)">删除部门</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  props: {
    treeNode: {
      type: Object,
      required: true
    },
    isRoot: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isdone: true
    }
  },
  methods: {
    async  Delpartment(id) {
      await this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await this.$emit('Delpartment', id)
    },
    Addpartment(id) {
      this.$emit('Addpartment', id)
    },
    Editpartment(id) {
      this.$emit('Editpartment', id)
    }
  }
}
</script>

<style>
</style>
